const Item = (props) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        background: "#fff",
        padding: 20,
        margin: 20
      }}
    >
      <div style={{ display: "flex", alignItems: "center" }}>
        <p
          style={{
            width: 90,
            height: 90,
            background: "#D8D8D8",
            borderRadius: 10
          }}
          className="img"
        ></p>
        <div style={{ width: 400, marginLeft: 20 }} className="content">
          <p style={{ fontSize: 32, color: "rgba(0,0,0,0.87)" }}>
            GCP研究项目名称
          </p>
          <p style={{ fontSize: 24, color: "rgba(0,0,0,0.54)" }}>
            GCP研究项目名称GCP研究项目名称GCP研究项目名称GCP研究项目
          </p>
        </div>
      </div>

      <p
        onClick={() => {
          props.onClick && props.onClick();
        }}
        style={{
          width: 144,
          height: 50,
          fontSize: 24,
          background: "#5BAF72",
          borderRadius: 4
        }}
        className="btn"
      >
        申请入组
        <div
          style={{
            display: "inline-block",
            width: 0,
            height: 0,
            marginLeft: 8,
            verticalAlign: "middle",
            borderTop: "8px solid transparent",
            borderLeft: "8px solid #fff",
            borderBottom: "8px solid transparent"
          }}
        ></div>
      </p>
    </div>
  );
};
